<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/home/webuploader/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/home/webuploader/examples/image-upload/style.css" />
</head>
<body>
<div id="wrapper">
    <input type="text" name="pic" id="p_imgUrl" value="">
    <div id="container">
        <!--头部，相册选择和格式选择-->

        <div id="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里，单次最多可选300张</p>
                </div>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div><div class="info"></div>
                <div class="btns">
                    <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/home/webuploader/examples/image-upload/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/webuploader/dist/webuploader.js"></script>
<!--<script type="text/javascript" src="__PUBLIC__/home/webuploader/examples/image-upload/upload.js"></script>-->
<script type="text/javascript">
    var uploader = WebUploader.create({
        auto: true,
        swf: '/Public/vendor/webuploader/Uploader.swf',
        //server: '<?php echo U('uploadimage');?>',
        server:'index.php/Index/index',
        pick: {
            id: '#uploadBtn',
            multiple: true,
            innerHTML: '选择文件'
        },
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        resize: false,
        compress: {
            width: 1000,
            height: 1000,
            quality: 80,
            allowMagnify: false,
            crop: false,
            preserveHeaders: false,
            noCompressIfLarger: false,
            compressSize: 100
        },
        duplicate: false,
        thumb: {
            width: 260,
            height: 380,
            quality: 50,
            allowMagnify: true,
            crop: false,
        },

    });


    uploader.on('fileQueued', function(file) {
        $("#doapply_btn").attr("disabled", true);

        var upload_node = $( '#rt_'+file.source.getRuid());
        upload_node.find('i').remove();

        uploader.makeThumb( file, function( error, ret ) {
            if ( error ) {
                upload_node.css('background', 'url('+ret+') no-repeat');
            } else {
                upload_node.css('background', 'url('+ret+') no-repeat');
            }
            upload_node.css('background-size', '100% 100%');
        });
    });
    uploader.on('uploadProgress', function(file, percentage) {
        var upload_node = $( '#rt_'+file.source.getRuid());

        if (upload_node.find('i').length > 0) {
            upload_node.find('i').css('background-size', percentage * 100 + '% 100%');
        } else {
            upload_node.prepend('<i style="display:block;position:absolute;height:40px;line-height:40px;font-size:20px;width:100%;background:url(/Public/wx/images/upload_gray.png) no-repeat;text-align:center;color:#FFF;font-style:normal;">上传中...</i>');
        }
    });
    uploader.on('uploadError', function(file) {
        $("#p_imgUrl").val('');

        var upload_node = $( '#rt_'+file.source.getRuid());
        upload_node.find('i').css('background', '#FF0000');
        upload_node.find('i').text('上传失败')
    });

    uploader.on('uploadSuccess', function(file, response) {
        var upload_node = $( '#rt_'+file.source.getRuid());
        if (response.code == '-1') {
            $("#p_imgUrl").val('');
            upload_node.find('i').css('background', '#FF0000');
            upload_node.find('i').text('上传失败')
        } else if (response.code == '1') {
            $("#p_imgUrl").val(response.url);
            upload_node.find('i').css('background', '#00CD00');
            upload_node.find('i').text('上传成功');
        }
    });

    uploader.on('uploadComplete', function(file) {
        $("#doapply_btn").removeAttr("disabled");
    });

    uploader.on('error', function(type) {
        alert(type);
    });
</script>
</body>
</html>